<template>
  <div id="app">
    <router-view></router-view>
    <div class="tab-bar">
      <router-link to="/">
        <div class="tab-item">
          <img src="../static/images/home.png" width="50px" height="50px" alt="banner1">
          <span @click="homePage">首页</span>
        </div>
      </router-link>
      <router-link to="/strategy">
        <div class="tab-item">
          <img src="../static/images/travel.png" width="50px" height="50px" alt="banner1">
          <span @click="strategyPage">游记</span>
        </div>
      </router-link>
      <router-link to="/order">
        <div class="tab-item">
          <img src="../static/images/order.png" width="50px" height="50px" alt="banner1">
          <span @click="orderPage">订单</span>
        </div>
      </router-link>
      <router-link to="/user">
        <div class="tab-item">
          <img src="../static/images/user.png" width="50px" height="50px" alt="banner1">
          <span @click="userPage">我的</span>
        </div>
      </router-link>
    </div>
  </div>
</template>

<style>
.tab-bar {
  display: flex;
  justify-content: space-around;
  border-top: 1px solid #ccc;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
}

.tab-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 0;
}

.tab-item img {
  width: 30px;
  height: 30px;
}
</style>
<script>
export default {
  name: 'App',
  data(){

  },
  methods:{
    smartPage(){
      location.href="http://localhost:8080/#/smart"
    },
    homePage(){
      location.href="http://localhost:8080/#/home"
    },
    strategyPage(){
      location.href="http://localhost:8080/#/strategy"
    },
    orderPage(){
      location.href="http://localhost:8080/#/order"
    },
    userPage(){
      location.href="http://localhost:8080/#/user"
      localStorage.setItem("userId",JSON.stringify(this.user.userId))
    }
  },
  created() {
    // this.homePage()
    this.smartPage();
  }
}
</script>